<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title><#if type=='2'>随笔<#else>活动</#if></title>
    <link rel="stylesheet" href="${e.res('/css/main.css')}">
    <link rel="stylesheet" href="${e.res('/css/essay.css')}">

    <script charset="utf-8" src="${e.res('/js/jquery-1.4.3.min.js')}"></script>
    <script charset="utf-8" src="${e.res('/js/jquery.base64.js')}"></script>
    <script src="${e.res('/js/errorHander.js')}"></script>

<body>
<#include "/pages/moudle/HeadFoot.ftl">

<@headFoot chooseTag = type>
<div class="essay-show">
    <ul class="essay-section">
        <#list tabList as tabL>
            <li <#if tabL_index == "0">class="current-essay"</#if> tabVal="${tabL.createYear}">${tabL.createYear}
                年（${tabL.countAmount}）
            </li>
        </#list>
    </ul>
    <ul class="essays">
        <#list essayList as essay>
            <li>
                <p class="essay-date-title">
                    <a class="essay-date" proId="${essay.prodId}" href="javascript:void(0)">${essay.createTime}</a>
                    <label class="essay-title">${essay.essayTitle}</label>
                </p>

                <p class="essay-content">
                ${essay.essayMiao}
                </p>
            </li>
        </#list>

    </ul>
    <div class="load-more"></div>
</div>

</@headFoot>
</body>

<script type="text/javascript">

    $(".essay-section li").click(function () {
        //$(".load-more").show();

        $(this).siblings("li").removeClass("current-essay");
        $(this).addClass("current-essay");

        var subParams = {};
        subParams.tabValue = $(this).attr("tabVal");
        subParams.type = ${type};

        $.ajax({
            url: '/queryTabEssay',
            type: 'POST',
            data: subParams,
            success: function (data) {
                $(".essays").html("");
                for (var i = 0; i < data.length; i++) {

                    var appHtml = '<li><p class="essay-date-title"><a class="essay-date" proId="' + data[i].prodId + '" href="javascript:void(0)">' + data[i].createTime +
                            '</a><label class="essay-title">' + data[i].essayTitle +
                            '</label></p><p class="essay-content">' + data[i].essayMiao +
                            '</p></li>';
                    $(".essays").append(appHtml);
                }
            }
        });
    })

    $(".essays").delegate("li", "click", function () {
        var essayid = $(this).find("a").attr("proId");
        window.location.href = "queryOnePro?prodId=" + essayid;
    })

    $(".load-more").click(function () {
        var subParams = {};
        subParams.tabValue = $(".essay-section .current-essay").attr("tabVal");
        subParams.type = ${type};
        subParams.currentTotle = $(".essays li").length;

        $.ajax({
            url: '/queryTabMore',
            type: 'POST',
            data: subParams,
            success: function (data) {
                //$(".essays").html("");
                //$(".load-more").hide();
                for (var i = 0; i < data.length; i++) {

                    var appHtml = '<li><p class="essay-date-title"><a class="essay-date" proId="' + data[i].prodId + '" href="javascript:void(0)">' + data[i].createTime +
                            '</a><label class="essay-title">' + data[i].essayTitle +
                            '</label></p><p class="essay-content">' + data[i].essayMiao +
                            '</p></li>';
                    $(".essays").append(appHtml);
                }
            }
        });
    })

</script>

</html>